<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/swiper-bundle.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/map.css" />
  <title>海房优选</title>
</head>

<body>
  <div class="box">
    <div class="map">
      <div class="map_point">
        <dl class="mp_1">
          <dt>庚坊国际发展中心</dt>
          <dd>3.5-6元</dd>
        </dl>
      </div>
    </div>
    <div class="nav">
      <div class="nav_left">
        <div class="nav_logo">
          <a href="index.html"><img src="images/logo_1.png" alt="" /></a>
        </div>
        <ul class="nav_menu">
          <li>
            <dl>
              <dt>房产类型</dt>
              <dd>
                <div class="nav_menu_item">
                  <div class="nmi_catalogue">
                    <h3 class="nmi_title">类型选择</h3>
                    <div class="nmi_checkbox">
                      <p><i></i><span>写字楼</span></p>
                      <p><i></i><span>产业园区</span></p>
                      <p><i></i><span>公寓</span></p>
                    </div>
                  </div>
                  <div class="nim_btn">
                    <span id="cancel_catalogue">取消</span>
                    <span id="cancel_submit" class="on">确定</span>
                  </div>
                </div>
              </dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>租 售</dt>
              <dd>
                <div class="nav_menu_item">
                  <div class="nmi_purchase">
                    <h3>租售方式</h3>
                    <div class="nmi_checkbox">
                      <p><i></i><span>租赁</span></p>
                      <p><i></i><span>购买</span></p>
                    </div>
                  </div>
                  <div class="nim_btn">
                    <span id="cancel_purchase">取消</span>
                    <span id="cancel_submit" class="on">确定</span>
                  </div>
                </div>
              </dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>价 格</dt>
              <dd>
                <div class="nav_menu_item">
                  <div class="nmi_price">
                    <h3>价 格</h3>
                    <div class="nmi_checkbox">
                      <p><i></i><span>3000-5000</span></p>
                      <p><i></i><span>5000-8000</span></p>
                      <p><i></i><span>8000-12000</span></p>
                      <p><i></i><span>12000-15000</span></p>
                      <p><i></i><span>15000-18000</span></p>
                      <p><i></i><span>18000以上</span></p>
                    </div>
                  </div>
                  <div class="nmi_custom">
                    <h3>自定义</h3>
                    <div class="nmi_range">
                      <p><input type="text"></p>
                      <p class="line"><s></s></p>
                      <p><input type="text"></p>
                      <p class="unit"><span>（元）</span></p>
                    </div>
                  </div>
                  <div class="nim_btn">
                    <span id="cancel_price">取消</span>
                    <span id="cancel_submit" class="on">确定</span>
                  </div>
                </div>
              </dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>面 积</dt>
              <dd>
                <div class="nav_menu_item">
                  <div class="nmi_area">
                    <h3 class="nmi_title">面积不限</h3>
                    <div class="nmi_checkbox">
                      <p><i></i><span>60m<sup>2</sup>以下</span></p>
                      <p><i></i><span>60-100m<sup>2</sup></span></p>
                      <p><i></i><span>100-200m<sup>2</sup></span></p>
                      <p><i></i><span>200-300m<sup>2</sup></span></p>
                      <p><i></i><span>300-400m<sup>2</sup></span></p>
                      <p><i></i><span>400-500m<sup>2</sup></span></p>
                      <p><i></i><span>500-600m<sup>2</sup></span></p>
                      <p><i></i><span>600m<sup>2</sup>以上</span></p>
                    </div>
                  </div>
                  <div class="nmi_custom">
                    <h3>自定义</h3>
                    <div class="nmi_range">
                      <p><input type="text"></p>
                      <p class="line"><s></s></p>
                      <p><input type="text"></p>
                      <p class="unit"><span>（平）</span></p>
                    </div>
                  </div>
                  <div class="nim_btn">
                    <span id="cancel_area">取消</span>
                    <span id="cancel_submit" class="on">确定</span>
                  </div>
                </div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
      <div class="nav_right">
        <div class="nav_search">
          <dl>
            <dt>
              <select name="" id="">
                <option value="0">房产类型</option>
                <option value="1">写字楼</option>
                <option value="2">产业园区</option>
                <option value="3">公寓</option>
              </select>
            </dt>
            <dd>
              <input type="text" placeholder="检索关键字" />
              <s></s>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="sider">
      <ol class="sider_tabs">
        <li><i></i><span>街道区划</span></li>
        <li><i></i><span>地铁沿线</span></li>
        <li><i></i><span>通勤找房</span></li>
      </ol>
      <div class="sider_panel sider_0">
        <div class="sp_filter">
          <div class="spf_left">
            <select name="" id="">
              <option value="0">请选择</option>
              <option value="1">北太平庄</option>
              <option value="2">中关村</option>
              <option value="3">望京</option>
              <option value="4">西北旺</option>
              <option value="5">国贸</option>
            </select>
            <span>28</span>
            <em>个信息</em>
          </div>
          <div class="spf_right">
            <span>默认</span>
            <select name="" id="">
              <option value="0">按价格</option>
              <option value="1">按距离</option>
              <option value="2">按面积</option>
              <option value="3">按方式</option>
            </select>
          </div>
        </div>
        <ul class="sp_filter_results">
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>地标建筑</span>
                    <span>地铁枢纽</span>
                    <span>临近地址</span>
                  </h4>
                  <h2><span>6-14</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <dl>
                <dt><img src="images/map/house_1.jpg" alt=""></dt>
                <dd>
                  <h3>欧美汇大厦</h3>
                  <h6>211-15604m<sup>2</sup></h6>
                  <h4>
                    <span>车位充足</span>
                    <span>地铁10分钟</span>
                  </h4>
                  <h2><span>4.3-11</span><em>元/m<sup>2</sup>天</em></h2>
                </dd>
              </dl>
            </a>
          </li>
        </ul>
      </div>
      <div class="sider_panel sider_1">
        <div class="sp_subways">
          <h4><span>选择地铁路线</span><i></i></h4>
          <div class="subways_list">
            <dl>
              <dt>
                <p><span>4号线</span><i></i></p>
              </dt>
              <dd>
                <p><i></i><span>安河桥北</span></p>
                <p><i></i><span>北宫门</span></p>
                <p><i></i><span>西苑</span></p>
                <p class="on"><i></i><span>圆明园</span></p>
                <p><i></i><span>北京大学东门</span></p>
                <p><i></i><span>中关村</span></p>
                <p><i></i><span>海淀黄庄</span></p>
                <p><i></i><span>人名大学</span></p>
              </dd>
            </dl>
            <dl>
              <dt>
                <p><span>6号线</span><i></i></p>
              </dt>
              <dd>
                <p><i></i><span>金安桥</span></p>
                <p><i></i><span>苹果园</span></p>
                <p><i></i><span>杨庄</span></p>
                <p><i></i><span>西黄村</span></p>
                <p><i></i><span>廖公庄</span></p>
                <p class="on"><i></i><span>田村</span></p>
                <p><i></i><span>海淀五路居</span></p>
                <p><i></i><span>慈寿寺</span></p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="sider_panel sider_2">
        <div class="sp_search">
          <h3 class="sps_title">可为您找到在指定时间内能到达工作地的房源</h3>
          <dl class="sps_destination">
            <input type="text" placeholder="请输入目标地点" />
          </dl>
          <div class="sps_form">
            <form action="">
              <dl>
                <dt>出行方式</dt>
                <dd>
                  <select name="" id="">
                    <option value="0">步行</option>
                    <option value="1">地铁</option>
                    <option value="2">驾车</option>
                    <option value="3">公交</option>
                    <option value="4">电动车</option>
                    <option value="5">自行车</option>
                  </select>
                </dd>
              </dl>
              <dl>
                <dt>时间选择</dt>
                <dd>
                  <select name="" id="">
                    <option value="0">5分钟以内</option>
                    <option value="1">5-10分钟</option>
                    <option value="2">10-15分钟</option>
                    <option value="3">15-20分钟</option>
                    <option value="4">20-25分钟</option>
                    <option value="5">25-30分钟</option>
                  </select>
                </dd>
              </dl>
              <dl class="submit">
                <input type="submit" value="开始寻找" />
              </dl>
            </form>
          </div>
          <div class="sps_example">
            <h4>举个例子</h4>
            <p>
              如您的工作地在中关村软件园，您每天开车上班，并且希望在30分钟内到达，那么在地图上为您推荐的就是30分钟内可驾车达到中关村软件园的房源。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="tools"></div>
  </div>
</body>

<script src="js/jquery.js"></script>
<script src="js/swiper-bundle.js"></script>
<script src="js/fun.js"></script>
<script>
  $(function () {
    $('.nmi_checkbox p').click(function () {
      $(this).toggleClass('on').siblings().removeClass('on')
    })

    $('#cancel_catalogue').click(function () {
      $(this).parents('.nim_btn').siblings('.nmi_catalogue').find('p').removeClass('on')
    })


    $('#cancel_purchase').click(function () {
      $(this).parents('.nim_btn').siblings('.nmi_purchase').find('p').removeClass('on')
    })

    $('#cancel_price').click(function () {
      $(this).parents('.nim_btn').siblings('.nmi_price').find('p').removeClass('on')
      $(this).parents('.nim_btn').siblings('.nmi_custom').find('input').val('')
    })

    $('#cancel_area').click(function () {
      $(this).parents('.nim_btn').siblings('.nmi_area').find('p').removeClass('on')
      $(this).parents('.nim_btn').siblings('.nmi_custom').find('input').val('')
    })

    $('.sider_tabs li').click(function () {
      let idx = $('.sider_tabs li').index($(this));
      $(this).addClass('on').siblings().removeClass('on')
      $('.sider_' + idx).show().siblings('.sider_panel').hide()
    })
    $('.sider_tabs li').eq(0).click()

    $('.tools').click(function () {
      $(this).toggleClass('on').siblings('.sider').toggleClass('on')
    })

    $('.subways_list dl').click(function () {
      $(this).addClass('on').siblings().removeClass('on')
      $(this).find('dd').show().parents('dl').siblings('dl').find('dd').hide()
    })
    $('.subways_list dl').eq(0).click()
  })
</script>

</html>